<template>
  <div class="live-wrapper">
    <div
      v-if="LiveList.length <= 0"
      class="no-data"
    >
      <NoData>直播功能暂未开启，敬请期待~</NoData>
    </div>
    <div v-else>
      <van-list
        v-model="loading"
        :finished="isFinished"
        loading-text="上拉查看更多"
        finished-text="— 没有更多了 —"
        class="live-list"
        @load="getLiveList"
      >
        <LiveItem
          v-for="(item, index) in LiveList"
          :key="index"
          :live-info="item"
        />
      </van-list>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import store from '@/store/store'
export default Vue.extend({
  components: {
    NoData: () => import('components/Class/NoData.vue'),
    LiveItem: () => import('components/Live/LiveItem.vue'),
  },
  data () {
    return {
      LiveList: [],
      pageSize: 6,
      pageNum: 1,
      loading: true,
      isFinished: false,
    }
  },
  created () {
    (this.$root.$children[0] as any).active = 2
    // this.getLiveList()
  },
  methods: {
    // 获取直播列表
    getLiveList () {
      this.$axios({
        method: 'get',
        url: 'Live/LiveListForH5',
        data: {
          CategoryId: 2887,
          PageNum: this.pageNum,
          PageSize: this.pageSize,
        },
      }).then(res => {
        this.$set(this.$data, 'LiveList', [...this.LiveList, ...res.LiveList])
        this.loading = false

        if (this.pageNum >= res.TotalPage) {
          this.isFinished = true
        } else {
          this.pageNum++
        }
      })
    },
  },
})
</script>

<style lang="scss" scoped>
.live-wrapper {
  min-height: 100%;
  background: #ffffff;
}
.no-data {
  margin-top: 40%;
}
</style>
